<template>
    <div class="ve_home">
      <el-row>
        <el-col :span="16">
          <template>
            <el-row :gutter="20" style="margin-bottom: 10px">
              <el-col :span="12">
                <div class="ve-card ve_card1" >
                  <i class="el-icon-suitcase-1"></i>
                  <div>
                    <p>场地数</p>
                    <span>{{data.courtNum}}</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="ve-card ve_card2">
                  <i class="el-icon-user"></i>
                  <div>
                    <p>非会员总数</p>
                    <span>{{data.userNum}}</span>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20" style="margin-top: 10px">
              <el-col :span="12">
                <div class="ve-card ve_card3">
                  <i class="el-icon-user-solid"></i>
                  <div>
                    <p>会员数量</p>
                    <span>{{data.memberNum}}</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="ve-card ve_card4">
                  <i class="el-icon-s-promotion"></i>
                  <div>
                    <p>总预约人数</p>
                    <span>{{data.reservationNum}}</span>
                  </div>
                </div>
              </el-col>
            </el-row>
          </template>
        </el-col>
        <el-col :span="8">
          <!--                <el-calendar class="ve_calendar"></el-calendar>-->
          <div class="ve-card ve_card3" style="height: 210px">
            <i class="el-icon-s-custom"></i>
            <div class="div1">
              <p>球友总数</p>
              <span>{{data.userNum+data.memberNum}}</span>
            </div>
          </div>
        </el-col>
      </el-row>
      <live-chart />
    </div>
</template>


<script>
  import axios from 'axios';
  import LiveChart from "@/views/dashboard/LiveChart";

  export default {
    components: {
      'live-chart': LiveChart
    },
    data() {
      return {
        data: [] // 存储数据的数组
      }
    },
    methods:{
      fetchData(){
        // 在组件加载完成后发送请求并获取数据
        axios.get('http://39.101.75.128:8080/courtStatistic/totalNum')
          .then(response => {
            // 更新data数组
            if(response.data.code==200){
              this.data = response.data.data;
              console.log(this.data)
            }

          })
          .catch(error => {
            // 处理错误
            console.error(error);
          });
      }
    },
    mounted() {
      this.fetchData();
    }
  }
</script>


<style lang="scss" scoped>
  .el-row {
    height: 50%;

    padding-right: 10px;
  }
  .ve-card {
    border-radius: 10px;
    height: 100%;
    display: flex;
    align-items: center;
    transition: all 500ms;
    color: #fff;
    &:hover {
      box-shadow: 3px 3px 6px 1px rgba(0, 0, 0, 0.2);
      background: #fff;
    }
    i {
      font-size: 100px;
      margin: 0 20px;
    }
    .div1 {
      flex: 1;
      padding-right: 12px;
      p {
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      span {
        font-size: 60px;
        font-weight: bold;
      }
    }
  }
  .ve_card1 {
    background: #409eff;
    &:hover {
      color: #409eff;
    }
  }
  .ve_card2 {
    background: #67c23a;
    &:hover {
      color: #67c23a;
    }
  }
  .ve_card3 {
    background: #e6a23c;
    &:hover {
      color: #e6a23c;
    }
  }
  .ve_card4 {
    background: #f56c6c;
    &:hover {
      color: #f56c6c;
    }
  }


  .el-row {
    height: 50%;

    padding-right: 10px;
  }
  .ve-card {
    border-radius: 10px;
    height: 100%;
    display: flex;
    align-items: center;
    transition: all 500ms;
    color: #fff;
    &:hover {
      box-shadow: 3px 3px 6px 1px rgba(0, 0, 0, 0.2);
      background: #fff;
    }
    i {
      font-size: 100px;
      margin: 0 20px;
    }
    div {
      flex: 1;
      padding-right: 12px;
      p {
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      span {
        font-size: 60px;
        font-weight: bold;
      }
    }
  }
  .ve_card1 {
    background: #409eff;
    &:hover {
      color: #409eff;
    }
  }
  .ve_card3 {
    background: #e6a23c;

    &:hover {
      color: #e6a23c;
    }
  }
  .ve_card4 {
    background: #f56c6c;
    &:hover {
      color: #f56c6c;
    }
  }
</style>

